<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /* 防止拖动文本，文本被选中 */
            user-select: none;
        }
        #draggable{
            text-align: center;
            background: white;
        }
        .dropzone{
            width: 200px;
            height: 20px;
            background: blueviolet;
            margin: 10px;
            padding: 10px;
        }
        .dropzone.dragover{
            background: purple;
        }
        .dragging{
            opacity: 0.5S;
        }
    </style>
</head>
<body>
    <!-- html5实现拖动必须要给拖动的那个元素加一个属性draggable ！！！-->
    <div class="dropzone">
        <div id="draggable" draggable="true">这个div可以拖动</div>
    </div>
    <div class="dropzone" id="droptarget"></div>
    <script>//事件四和五最为关键，其他时间为控制样式 
        //获取拖动的元素
        let dragged
        const dragItem=document.querySelector('#draggable')
        const dropTarget=document.querySelector('#droptarget')
        //第一个事件 dragItem的drag在拖动的时候触发
        dragItem.addEventListener('drag',()=>{
            console.log('我被拖了');
        })
       /*  //第二个事件 dragstart
        dragItem.addEventListener('dragstart',(e)=>{
            console.log('开始拖动');
            console.log(e.target);//可以找到拖动的那个元素
            dragged=e.target//给dragged赋值
            dragged.classList.add('dragging')//再为其添加一个半透明类
        })
        //事件三 dragend
        dragItem.addEventListener('dragend',(e)=>{
            console.log('拖动结束啦');
            dragged=e.target//给dragged赋值
            dragged.classList.remove('dragging')//再移除这个半透明类
        }) */
        //事件四 dragover
        dropTarget.addEventListener('dragover',(e)=>{
            e.preventDefault()//阻止其默认的行为  因为dragover 默认不能移动
            console.log('dragover');
        })
        //事件五 drop
        dropTarget.addEventListener('drop',(e)=>{
            e.preventDefault()
            dragItem.parentNode.removeChild(dragItem)//原先位置删除
            dropTarget.appendChild(dragItem)//新的位置添加
        })
        //事件六 dragenter
        dropTarget.addEventListener('dragenter',()=>{
            dropTarget.classList.add('dragover')//添加相应类
        })
        //事件七 dragleave
        dropTarget.addEventListener('dragleave',()=>{
            dropTarget.classList.remove('dragover')//再移除这个类
        })
    </script>
</body>
</html>